<template>
  <div class="father">
    <el-form :inline="true" :model="formCheck" class="demo-form-inline">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark claimsOrder">
            <el-form-item v-model="formCheck.orderType" label="预约验车服务">
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <!--用户录入部分-->
        <el-col :span="8" class="user">
          <div class="grid-content bg-purple">
            <el-form
              :inline="true"
              :model="formClaimsUser"
              class="demo-form-inline"
            >
              <!--登记人和被保险人-->
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="登记人:">
                  <el-input
                    v-model="formClaimsUser.safeorderRegister"
                    placeholder="登记人"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="被保险人:">
                  <el-input
                    v-model="formClaimsUser.safeorderProtected"
                    placeholder="被保险人"
                  ></el-input>
                </el-form-item>
              </div>
              <!--联系-->
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="联系人:">
                  <el-input
                    v-model="formClaimsUser.safeorderUser"
                    placeholder="联系人"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="联系电话:">
                  <el-input
                    v-model="formClaimsUser.safeorderUserphone"
                    placeholder="联系电话"
                  ></el-input>
                </el-form-item>
              </div>
              <!--车信息-->
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="车牌号:">
                  <el-input
                    v-model="formClaimsUser.safeorderCarnumber"
                    placeholder="车牌号"
                  ></el-input>
                </el-form-item>
              </div>
              <!--            <div class="grid-content bg-purple">-->
              <!--              <el-form-item :required=true label="发动机型号:">-->
              <!--                <el-input v-model="formClaimsUser.safeorderEngineno" placeholder="发动机型号"></el-input>-->
              <!--              </el-form-item>-->
              <!--            </div>-->
              <!--定损地点备注-->
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="定损地点:">
                  <el-input
                    v-model="formClaimsUser.safeorderFeeaddress"
                    placeholder="定损地点"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="客户备注:">
                  <el-input
                    v-model="formClaimsUser.safeorderUsernote"
                    placeholder="客户备注"
                  ></el-input>
                </el-form-item>
              </div>
              <!--接还车地址 及地图-->
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="接车地址:">
                  <el-input
                    v-model="formClaimsUser.safeorderGoaddress"
                    placeholder="接车地址"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="还车地址:">
                  <el-input
                    v-model="formClaimsUser.safeorderBackaddress"
                    placeholder="还车地址"
                  ></el-input>
                </el-form-item>
              </div>
              <!--            <div class="grid-content bg-purple">-->
              <!--              <el-form-item :required=true label="地图行程:">-->
              <!--                <el-button type="primary">接车地图</el-button>-->
              <!--                <el-button type="primary">还车地图</el-button>-->
              <!--              </el-form-item>-->
              <!--            </div>-->
              <!--修理部位-->
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="修理部位图片:">
                  <!--图片附件-->
                  <el-upload
                    class="upload-demo"
                    accept="image/jpeg,image/jpg,image/png"
                    name="file"
                    ref="img"
                    :action="imgUpload"
                    :file-list="fileListUser"
                    :on-success="handleSuccess"
                    list-type="picture-card"
                  >
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{ file }">
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                        alt=""
                      />
                      <span class="el-upload-list__item-actions">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview"
                        >
                          <i class="el-icon-zoom-in"></i>
                        </span>
                      </span>
                    </div>
                    <div slot="tip" class="el-upload__tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="imageUrl" alt="" />
                  </el-dialog>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </el-col>
        <!--后台录入部分-->
        <el-col :span="8" class="work">
          <div class="grid-content bg-purple">
            <el-form
              :inline="true"
              :model="formClaims"
              class="demo-form-inline"
            >
              <!--接还车-->
              <div class="grid-content bg-purple">
                <el-form-item
                  :required="true"
                  label="请选择接车司机:"
                  class="textDr"
                >
                  <el-select
                    v-model="driverArea.driver_area"
                    placeholder="请选择区域"
                    @change="getArea"
                    class="selected"
                  >
                    <el-option
                      v-for="(item, index) in driverArea"
                      :label="item.driver_area"
                      :value="item.driver_area"
                      :key="index"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="driverName.driver_name"
                    placeholder="请选择司机"
                  >
                    <el-option
                      v-for="(item, index) in driverName"
                      :label="item.driver_name"
                      :value="item.driver_name"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <!--            <div class="grid-content bg-purple">-->
              <!--              <el-form-item :required=true label="还车司机:">-->
              <!--                <el-select v-model="backArea.driver_area" placeholder="请选择区域" @change="getbackArea">-->
              <!--                  <el-option v-for="(item,index) in backArea"-->
              <!--                             :label="item.driver_area"-->
              <!--                             :value="item.driver_area" :key="index"></el-option>-->
              <!--                </el-select>-->
              <!--                <el-select v-model="backDriver.driver_name" placeholder="请选择司机">-->
              <!--                  <el-option v-for="(item,index) in backDriver"-->
              <!--                             :label="item.driver_name"-->
              <!--                             :value="item.driver_name" :key="index"></el-option>-->
              <!--                </el-select>-->
              <!--              </el-form-item>-->
              <!--            </div>-->
              <!--订单状态和4s店选择-->
              <!--            <div class="grid-content bg-purple">-->
              <!--              <el-form-item :required=true label="订单状态:">-->
              <!--                <el-select v-model="OrderState.orderState_name" placeholder="订单状态" @change="getOrderValue">-->
              <!--                  <el-option v-for="item in OrderState"-->
              <!--                             :label="item.orderState_name"-->
              <!--                             :value="item.orderState_id" :key="item.orderState_id"></el-option>-->
              <!--                </el-select>-->
              <!--              </el-form-item>-->
              <!--            </div>-->
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="4S店选择:">
                  <el-select
                    v-model="shopArea.sstore_area"
                    placeholder="请选择区域"
                    @change="getshopArea"
                  >
                    <el-option
                      v-for="(item, index) in shopArea"
                      :label="item.sstore_area"
                      :value="item.sstore_area"
                      :key="index"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="shopName.sstore_shortname"
                    placeholder="请选择4S店"
                  >
                    <el-option
                      v-for="(item, index) in shopName"
                      :label="item.sstore_shortname"
                      :value="item.sstore_shortname"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <!--派工单位和特定事项-->
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="派工单位:">
                  <el-select
                    v-model="formClaims.safeorderGocompany"
                    placeholder="派工单位"
                  >
                    <el-option label="后台录入" value="1"></el-option>
                    <el-option label="用户录入" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <!--            <div class="grid-content bg-purple">-->
              <!--              <el-form-item :required=true label="特定事项:">-->
              <!--                <el-input v-model="formClaims.safeorderNotice" placeholder="特定事项"></el-input>-->
              <!--              </el-form-item>-->
              <!--            </div>-->
              <!--单选框-->
              <div class="grid-content bg-purple">
                <el-form-item
                  :required="true"
                  v-model="formClaims.safeorderIsfive"
                  label="是否五环内:"
                >
                  <el-radio v-model="formClaims.radio_ad" label="1"
                    >是</el-radio
                  >
                  <el-radio v-model="formClaims.radio_ad" label="2"
                    >否</el-radio
                  >
                </el-form-item>
              </div>
              <div class="grid-content bg-purple">
                <el-form-item
                  :required="true"
                  v-model="formClaims.safeorderNeedmoney"
                  label="是否需要赔款:"
                >
                  <el-radio v-model="radio_claims" label="3">是</el-radio>
                  <el-radio v-model="radio_claims" label="4">否</el-radio>
                </el-form-item>
              </div>
              <!--短信-->
              <div class="grid-content bg-purple">
                <el-form-item
                  :required="true"
                  v-model="formClaims.safeorderSendmessage"
                  label="是否发送短信:"
                >
                  <el-radio v-model="formClaims.radio_msg" label="5"
                    >是</el-radio
                  >
                  <el-radio v-model="formClaims.radio_msg" label="6"
                    >否</el-radio
                  >
                </el-form-item>
              </div>
              <!--短信内容-->
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="短信内容:">
                  <el-input
                    id="userMsg"
                    type="textarea"
                    resize="none"
                    :rows="8"
                    placeholder="请输入内容"
                    v-model="textareaUser"
                  >
                  </el-input>
                </el-form-item>
              </div>
              <div class="grid-content bg-purple">
                <el-button type="primary" @click="textMsg">生成短信</el-button>
                <el-button type="primary" @click="sendMsg"
                  >发送给用户</el-button
                >
              </div>
              <div class="grid-content bg-purple driverMsg">
                <el-form-item :required="true" label="短信内容:">
                  <el-input
                    id="driverMsg"
                    type="textarea"
                    resize="none"
                    :rows="8"
                    placeholder="请输入内容"
                    v-model="textareaDriver"
                  >
                  </el-input>
                </el-form-item>
              </div>
              <div class="grid-content bg-purple">
                <el-button type="primary" @click="driverMsg"
                  >生成短信</el-button
                >
                <el-button type="primary" @click="sendDriverMsg"
                  >发送给司机</el-button
                >
              </div>
            </el-form>
          </div>
        </el-col>
        <!--司机录入部分-->
        <el-col :span="8" class="driver">
          <div class="grid-content bg-purple">
            <el-form
              :inline="true"
              :model="formClaimsDriver"
              class="demo-form-inline"
            >
              <!--预计完成时间-->
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="预计完成时间:">
                  <el-date-picker
                    v-model="safeorderSpendtime"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
              <!--拍照内容-->
              <el-form-item :required="true" label="拍照内容:">
                <el-input
                  placeholder="行驶证，交强险保单收取"
                  v-model="formClaimsDriver.input"
                  :disabled="true"
                >
                </el-input>
              </el-form-item>
              <!--图片附件-->
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="上传相关证件图片:">
                  <!--图片附件-->
                  <el-upload
                    class="upload-demo"
                    accept="image/jpeg,image/jpg,image/png"
                    name="file"
                    ref="img"
                    :action="imgUpload"
                    :file-list="fileListDriver"
                    :on-success="handleSuccessDriver"
                    list-type="picture-card"
                  >
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{ file }">
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                        alt=""
                      />
                      <span class="el-upload-list__item-actions">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardDriver"
                        >
                          <i class="el-icon-zoom-in"></i>
                        </span>
                      </span>
                    </div>
                    <div slot="tip" class="el-upload__tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="driverImageUrl" alt="" />
                  </el-dialog>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <div class="dialog-footer">
        <el-button @click="delData">取 消</el-button>
        <el-button type="primary" @click="saveData">保 存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "claimsCar",
  data() {
    return {
      //图片上传地址
      imgUpload: this.$api.orderManage.imgUpload,
      formCheck: {
        orderType: "预约验车服务"
      },
      //后台录入部分
      driverArea: [],
      driverName: [],
      backArea: [],
      backDriver: [],
      OrderState: [],
      shopArea: [],
      shopName: [],
      formClaims: {},
      safeorderGocompany: 0,
      safeorderIsfive: "",
      safeorderNeedmoney: "",
      safeorderSendmessage: "",
      radio_ad: "1",
      radio_claims: "1",
      radio_msg: "1",
      textareaUser: "",
      textareaDriver: "",
      //用户录入部分
      dialogVisible: false,
      disabled: false,
      formClaimsUser: {},
      fileListUser: [],
      imageUrl: "",
      saveImg: "",
      //司机部分
      //预计完成时间
      safeorderSpendtime: "",
      formClaimsDriver: {
        input: ""
      },
      dialogDriverVisible: false,
      fileListDriver: [],
      driverImageUrl: ""
    };
  },
  created() {
    this.getDriverArea();
    this.getBackArea();
    this.getShopArea();
    this.getOrderState();
  },
  methods: {
    //子传父
    delData() {
      this.$emit("getchidval");
    },
    //向服务器发起请求，添加订单
    saveData() {
      this.$emit("getchidval");
      console.log(this.OrderState.orderSate);
      this.$axios
        .post(
          this.$api.orderManage.add,
          {
            safeorderType: this.formCheck.orderType,
            safeorderGodriver: this.driverName.driver_name,
            safeorderBackdriver: this.backDriver.driver_name,
            safeorderStateid: this.orderState,
            safeorder4sshop: this.shopName.sstore_shortname,
            safeorderGocompany: this.formClaims.safeorderGocompany,
            safeorderIsfive: this.formClaims.radio_ad,
            safeorderNeedmoney: this.formClaims.radio_claims,
            safeorderSendmessage: this.formClaims.radio_msg,
            safeorderNotice: this.formClaims.safeorderNotice,
            safeorderRegister: this.formClaimsUser.safeorderRegister,
            safeorderProtected: this.formClaimsUser.safeorderProtected,
            safeorderUser: this.formClaimsUser.safeorderUser,
            safeorderUserphone: this.formClaimsUser.safeorderUserphone,
            safeorderCarnumber: this.formClaimsUser.safeorderCarnumber,
            safeorderEngineno: this.formClaimsUser.safeorderEngineno,
            safeorderFeeaddress: this.formClaimsUser.safeorderFeeaddress,
            safeorderUsernote: this.formClaimsUser.safeorderUsernote,
            safeorderGoaddress: this.formClaimsUser.safeorderGoaddress,
            safeorderBackaddress: this.formClaimsUser.safeorderBackaddress,
            safeorderImageuri: this.saveImg
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
          this.dialogTableVisible = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //用户短信生成按钮
    textMsg() {
      this.$message({
        message: "已成功生成短信",
        type: "success"
      });
    },
    //用户短信发送成功
    sendMsg() {
      document.getElementById("userMsg").value = "";
      this.$message({
        message: "已成功发送给用户",
        type: "success"
      });
    },
    //司机短信生成
    driverMsg() {
      this.$message({
        message: "已成功生成短信",
        type: "success"
      });
    },
    //司机短信发送
    sendDriverMsg() {
      document.getElementById("driverMsg").value = "";
      this.$message({
        message: "已成功发送给司机",
        type: "success"
      });
    },
    //获取接车司机区域
    getDriverArea: function() {
      this.$axios
        .get(this.$api.orderManage.driversarea, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          this.$set(this.$data, "driverArea", response.data.data);
          //console.log("区域=",this.driverArea)
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取接车区域选定值,并将其赋值给司机获取名单传值
    getArea: function(val) {
      this.areaDriver = val;
      //console.log(val);
      this.getDriverName();
    },
    //获取接车司机名单
    getDriverName: function() {
      this.$axios
        .post(
          this.$api.orderManage.drivers,
          {
            area: this.areaDriver
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          //console.log(response.data)
          this.$set(this.$data, "driverName", response.data.data);
          //console.log("司机名单=",this.driverName)
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取还车司机区域
    getBackArea: function() {
      this.$axios
        .get(this.$api.orderManage.driversarea, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          this.$set(this.$data, "backArea", response.data.data);
          //console.log("区域=",this.backArea)
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取还车区域改变值
    getbackArea: function(val) {
      this.backDriverArea = val;
      this.getBackDriver();
    },
    //获取还车司机名单
    getBackDriver: function() {
      this.$axios
        .post(
          this.$api.orderManage.drivers,
          {
            area: this.areaDriver
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          //console.log(response.data)
          this.$set(this.$data, "backDriver", response.data.data);
          // console.log("司机名单=",this.backDriver)
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取订单状态
    getOrderState: function() {
      this.$axios
        .post(this.$api.orderManage.orderstate, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          this.$set(this.$data, "OrderState", response.data.data);
          console.log("订单状态 = ", this.OrderState);
        })
        .catch(err => {
          console.log(err);
        });
    },
    //将选择好的订单状态值返回数据库
    getOrderValue: function(val) {
      this.orderState = val;
    },
    //获取4s店的区域
    getShopArea: function() {
      this.$axios
        .get(this.$api.orderManage.area4S, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          console.log(response)
          this.$set(this.$data, "shopArea", response.data.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取4S店区域的改变值
    getshopArea: function(val) {
      this.ShopArea = val;
      this.getShopName();
    },
    //获取4S店
    getShopName: function() {
      this.$axios
        .post(
          this.$api.orderManage.shop4S,
          {
            area: this.ShopArea
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          this.$set(this.$data, "shopName", response.data.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    //用户图片上传部分的方法
    handleSuccess: function(response) {
      console.log("response = ", response);
      this.saveImg = response.fileName;
      this.imageUrl = response.data;
      console.log("this.imageUrl = ", this.imageUrl);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //司机图片上传
    handleSuccessDriver: function(response) {
      console.log("response = ", response);
      this.saveImg = response.fileName;
      this.imageUrl = response.data;
      console.log("this.imageUrl = ", this.imageUrl);
    },
    handlePictureCardDriver(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped>
/*头部样式*/
.claimsOrder {
  border-bottom: 1px solid grey;
  padding: 10px 0;
}
/*选择框大小*/
.el-select {
  width: 100px;
  margin-right: 10px;
}
/*输入框大小*/
.el-input {
  width: 230px;
}
/*短信按钮*/
.text {
  margin-left: 20px;
}
/*图片上传的样式*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/*yuechen update by2020/9/29*/
.dialog-footer {
  float: right;
}
.father {
  overflow: hidden;
}
/*yuechen update by2020/10/9*/
.driverMsg {
  margin-top: 20px;
}
.work {
  text-align: left;
  width: 280px;
  margin-left: 20px !important;
}
.user {
  text-align: left;
  width: 280px;
  margin-left: 20px !important;
}
.driver {
  text-align: left;
  width: 280px;
  margin-left: 20px !important;
}
</style>
